<template>
	<view>
		
		<headerWithHome />
		
		<view class="container">
			
			<!-- 欢迎语 -->
			<view class="welcome">
				<view class="welcome-title">
					欢迎登陆
				</view>
				<view class="welcome-sub-title">
					登录后可保存记录～
				</view>
			</view>
			
			<!-- 手机号输入框 -->
			<view class="phone">
				<input v-model="mobile" placeholder-class="phone-placeholder" type="number" placeholder="请输入您的手机号">
			</view>
			
			<!-- 手机号输入框下的border -->
			<view class="phone-border" />
				
			<!-- 登陆按钮 -->
			<view class="next">
				<button :style="{ backgroundColor: !mobile ? '#A7CBB3' : '#2C874A'}" @click="login" :disabled="!mobile" type="default">下一步</button>
			</view>
			
			<view class="foot">
				<text class="foot-title">
					点击下一步即同意
				</text>
				<text class="foot-content">
					《隐私保护政策》
				</text>
				<text class="foot-title">
					和
				</text>
				<text class="foot-content">
					《用户服务条款》
				</text>
			</view>
				
			<!-- <button type="default" open-type="getUserInfo" :bindgetuserinfo="bindGetUserInfo">userInfo</button> -->
			
		</view>
		
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				mobile: '',
				
			}
		},
		methods: {
			...mapMutations({
				'setMobile': 'user/SET_MOBILE',
			  }),
			login(){
				this.setMobile(this.mobile)
				// todo - 发送请求，获取验证码, 验证手机号
				uni.navigateTo({
					url: 'authCode'
				})
			}
		}
	}
</script>

<style lang="scss" scoped> 

	.foot{
		font-size: 24rpx;
		 margin-top: 32rpx;
		&-title{
			color: #B8BDCC;
		}
		
		&-content{
			color: #2C874A;
		}
	}

	.next{
		margin-top: 99rpx;
		button{
			width:622rpx;
			height:90rpx;
			border-radius:45rpx;
			// opacity:0.4;
			color: white;
		}
	}

	.phone-border{
		width:622rpx;
		height:2rpx;
		background:rgba(233,233,242,1);
		border-radius:1rpx;
		margin-top: 16rpx;
	}

	.container{
		padding: 40rpx 65rpx 0rpx 65rpx;
	}
	
	.phone{
		margin-top: 190rpx;
		input{
			font-size: 56rpx;
			height: 78rpx;
		}
		.phone-placeholder{
			height: 78rpx;
			color: #E9F2EB;
			font-size: 56rpx;
			line-height: 78rpx;
		}
	}
	
	.welcome{
		
		&-title{
			width:208rpx;
			height:73rpx;
			font-size:52rpx;
			font-family:PingFangSC-Medium,PingFang SC;
			font-weight:500;
			color:rgba(23,27,27,1);
			line-height:73rpx;
		}
		
		&-sub-title{
			margin-top: 16rpx;
			width:532rpx;
			height:40rpx;
			font-size:28rpx;
			font-family:PingFangSC-Regular,PingFang SC;
			font-weight:400;
			color:rgba(179,192,192,1);
			line-height:40rpx;
		}
	}
	
</style>
